<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>
<!-- 
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
    需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 
-->

<body>
    <div id="root">
        <h2>当前的n值为: <span v-text="n"></span></h2>
        <h2>放大十倍后的n值为: <span v-big="n"></span></h2>
        <button @click="n++">n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    const vm = new Vue({
        el: '#root',
        data: {
            n: 1
        },
        directives: {
            //指令定义时不加 v- ，但使用时要加 v- 。另外指令中的 this 指向 window 。
            //指令名如果是多个单词，要使用 aaa-bbb 命名方式，不要用 aaaBbb 命名。

            //第一种写法函数形式element为指令所在的真实dom元素,binding为指令对象，包含以下属性：

            // name：指令名=名称，不包括 v-前缀
            // value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2
            // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
            // expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
            // arg：传给指令的参数，可选。例如 v-my-directive: foo 中，参数为 "foo"。
            // modifiers: 一个包含修饰符的对象。例如：v - my - directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

            /* big函数何时调用: 1. 指令与标签绑定成功时（初始化时执行），2. 指令所在的模板被重新解析时执行。  */

            big: function (element, binding) {
                // console.log(element instanceof HTMLElement);//判断是不是真实的dom元素
                element.innerText = binding.value * 10;
            }
        }
    });
</script>

</html>